<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-msg-box flex-a-center" :style="'padding-top:'+statusBarHeight+'px'">
			<back :borderColor="'#333'" :padding="'4rpx 0 0'" @click="goBack"></back>
			<view class="search-msg flex-center-between">
				<search :width="'441rpx'" :height="'68rpx'" :margin="'10rpx 0 10rpx 24rpx'" :backgroundColor="'#F7F7F7'" @input="searchInputChange" @confirm="searchInputConfirmed"></search>
			</view>
		</view>
		<!-- 历史记录 -->
		<view v-if="listShow" class="history-box animated fadeIn fast" :style="{paddingTop:statusBarHeight+56+'px'}">
			<view class="flex-center-between">
				<text class="title">历史搜索</text>
				<view @tap="clear">
					<image src="http://www.xvopen.com/xiaoV/img1/delete.png" mode="" class="clear-img"></image>
				</view>
			</view>
			<view class="flex flex-wrap animated fadeIn fast">
				<view v-for="(item,index) in list" :key="item" class="history" @tap.stop="handlebadgeSearch($event)" :data-history="item">
				{{item}}
					<view class="round-fail" @tap.stop="deleteHistory(index)">
						<view class="long-side">
							<view class="long-side"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热门搜索 开始 -->
		<!-- <view class="hot-search-box">
			<view class="py-3 px-2">
				<text class="font-md font-weight-bold">热门搜索</text>
			</view>
			<view class="hot-search">
				<view v-for="(item,index) in hotwordsList" :key="item" @tap.stop="hotwordsSearch(item)">
				   <text>{{item.hotWordsName}}</text>
				</view>
			</view>
		</view> -->
		<!-- 热门搜索 结束 -->
		<!-- 是否要清空历史记录 蒙版层 -->
		<hint v-model:modelValue="isClear" :content="'是否要清空历史记录？'" @confirm="hintConfirm"></hint>
	</view>
</template>

<script>
import { systemStore } from '@/stores/system'
	export default {
		data() {
			return {
				list:[],
				keyword:"",
				hotwordsList:'',
				listShow:false,
				listnew:[],
				statusBarHeight:null,
				isClear:false
			}
		},
		onLoad() {
			let app = getApp()
      const SystemStore =systemStore()
			this.statusBarHeight = SystemStore.statusBarInfo.statusBarHeight;
			let listnew = uni.getStorageSync('historyKeyword')
			if(listnew){
				this.list = JSON.parse(listnew)
				console.log('this.list1:'+this.list)
				this.listShow = true
			}
		},
		onShow() {
			let listnew = uni.getStorageSync('historyKeyword')
			if(listnew){
				this.list = JSON.parse(listnew)
				console.log('this.list2:'+this.list)
				this.listShow = true
			}
		},

		methods: {
			// 输入
			searchInputChange(e){
				this.keyword = e.detail.value
				console.log(this.keyword,'this.keyword')
				console.log(e,'---e')
			},
			// 确认
			searchInputConfirmed(e){
				this.handleSearchEvent()
			},
			// 搜索
			handleSearchEvent(){
				if(this.keyword == ''){
					return this.$toast('请输入关键词')
				}
				// 跳转到搜索结果页
				this.keyword=this.keyword.replace(/\s+/ig," ");
				uni.navigateTo({
					url: './searchShopResult?keyword='+this.keyword,
				});
				// 加入到历史记录
				this.addHistory()
			},
			// 历史记录搜索
			handlebadgeSearch(e){
				console.log('e',e)
				this.keyword = e.currentTarget.dataset.history
				uni.navigateTo({
					url: './searchShopResult?keyword='+this.keyword,
				});
			},
			// 热门搜索热词搜索
			// hotwordsSearch(e){
			// 	console.log(e.hotWordsName)
			// 	this.keyword = e.hotWordsName
			// 	uni.navigateTo({
			// 		url: '../search-result/search-result?keyword='+this.keyword,
			// 	});
			// 	this.addHistory()
			// },
			// addHistory(){
			// 	let index = this.list.findIndex(v=>v == this.keyword)
			// 	if(index != -1){
			// 		this.objToFirst(this.list,index)
			// 	} else {
			// 		this.list.unshift(this.keyword)
			// 	}
			// 	uni.setStorageSync('historyKeyword',JSON.stringify(this.list))
			// },
			addHistory(){
				let index = this.list.findIndex(v=>v == this.keyword)
				this.listnew = []
				for(let i=0;i<this.list.length;i++){
					this.listnew.push(this.list[i])
				}
				// this.listnew = this.list
				if(index != -1){
					this.objToFirst(this.listnew,index)
				} else {
					this.listnew.unshift(this.keyword)
				}
				console.log('this.listnew:'+this.listnew)
				console.log('this.list:'+this.list)
				uni.setStorageSync('historyKeyword',JSON.stringify(this.listnew))
			},
			deleteHistory(index){
				this.listnew = this.list.splice(index,1)
				uni.setStorageSync('historyKeyword',JSON.stringify(this.listnew))
			},
			clear(){
				// uni.showModal({
				// 	content: '是否要清空历史记录？',
				// 	success: (res)=> {
				// 		if (res.confirm) {
				// 			this.list = []
				// 			uni.removeStorageSync('historyKeyword')
				// 			this.listShow = false
				// 		}
				// 	}
				// });
				this.isClear = true
			},
			hintConfirm(){
				this.list = []
				uni.removeStorageSync('historyKeyword')
				this.listShow = false
				this.isClear = false
			},
			// 置顶数组某一项
			objToFirst(arr,index){
				if(index != 0){
					arr.unshift(arr.splice(index,1)[0])
				}
				return arr
			},
			goBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page{background-color: #fff;}
</style>
<style lang="scss">

.search-msg-box{
	width: 750rpx;
	background-color: #fff;
	padding-left: 24rpx;
	position: fixed;
	left: 0;
	z-index: 9;
	.search-msg{
		width: 65%
	}
}

/* 热门搜索 开始 */
.hot-search-box,.history-box{
	margin: 24rpx;
	.title{
		font-weight: bold;
		margin-bottom: 20rpx;
	}
}
.hot-search{
	display: flex;
	flex-wrap: wrap;
}
.hot-search>view,.history{/* 历史记录 */
	padding: 12rpx 24rpx;
	background-color: #F7F7F7;
	text-align: center;
	border-radius: 36rpx;
	margin: 0 16rpx 16rpx 0;
	min-width: 157rpx;
	position: relative;
}

/* 热门搜索 结束*/
/* 历史记录 清空图标*/
	.clear-img{
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 20rpx;
	}

.round-fail{
	width: 25rpx;
	height: 25rpx;
	position: absolute;
	top: -8rpx;
	right: -4rpx;
	background-color: #8B8B8B;
	border-radius: 50%;
	.long-side{
		width: 14rpx;
		height: 2rpx;
		background-color: #fff;
		transform: rotateZ(135deg);
		border-radius: 1rpx 0 0 1rpx;
		position: absolute;
		top: 45%;
		left: 24%;
		.long-side{
			width: 14rpx;
			height: 2rpx;
			background-color: #fff;
			transform: rotateZ(90deg);
			border-radius: 1rpx 0 0 1rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
		}
	}
}
</style>
